<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>项目主要功能 | lll</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/myblog/img/favicon.ico">
    <link rel="stylesheet" href="/myblog/css/style.css">
    <meta name="description" content="lll">
    
    <link rel="preload" href="/myblog/assets/css/0.styles.6d34f8a8.css" as="style"><link rel="preload" href="/myblog/assets/js/app.5e430372.js" as="script"><link rel="preload" href="/myblog/assets/js/2.4f8c3bb6.js" as="script"><link rel="preload" href="/myblog/assets/js/27.cbb5edb3.js" as="script"><link rel="prefetch" href="/myblog/assets/js/10.64c8fab5.js"><link rel="prefetch" href="/myblog/assets/js/11.6c6d1141.js"><link rel="prefetch" href="/myblog/assets/js/12.1ce59adc.js"><link rel="prefetch" href="/myblog/assets/js/13.0042d6cf.js"><link rel="prefetch" href="/myblog/assets/js/14.38257b60.js"><link rel="prefetch" href="/myblog/assets/js/15.cfd9bf68.js"><link rel="prefetch" href="/myblog/assets/js/16.4a7d6f31.js"><link rel="prefetch" href="/myblog/assets/js/17.49202f3b.js"><link rel="prefetch" href="/myblog/assets/js/18.9c119c8b.js"><link rel="prefetch" href="/myblog/assets/js/19.8d4a4dec.js"><link rel="prefetch" href="/myblog/assets/js/20.ed64e210.js"><link rel="prefetch" href="/myblog/assets/js/21.f5ff3b18.js"><link rel="prefetch" href="/myblog/assets/js/22.de81f692.js"><link rel="prefetch" href="/myblog/assets/js/23.0c58312b.js"><link rel="prefetch" href="/myblog/assets/js/24.94b1183d.js"><link rel="prefetch" href="/myblog/assets/js/25.62df09b8.js"><link rel="prefetch" href="/myblog/assets/js/26.508dea78.js"><link rel="prefetch" href="/myblog/assets/js/3.f34952a8.js"><link rel="prefetch" href="/myblog/assets/js/4.c092b489.js"><link rel="prefetch" href="/myblog/assets/js/5.42cf8a50.js"><link rel="prefetch" href="/myblog/assets/js/6.adeeeaa0.js"><link rel="prefetch" href="/myblog/assets/js/7.81f6d2e5.js"><link rel="prefetch" href="/myblog/assets/js/8.2cd4d454.js"><link rel="prefetch" href="/myblog/assets/js/9.8155b098.js">
    <link rel="stylesheet" href="/myblog/assets/css/0.styles.6d34f8a8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/myblog/" class="home-link router-link-active"><!----> <span class="site-name">lll</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="微信小程序项目" class="dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow down"></span></button> <button type="button" aria-label="微信小程序项目" class="mobile-dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/guide/" class="nav-link router-link-active">
  wxapp-music
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试宝典" class="dropdown-title"><span class="title">面试宝典</span> <span class="arrow down"></span></button> <button type="button" aria-label="面试宝典" class="mobile-dropdown-title"><span class="title">面试宝典</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/baodian/zero/" class="nav-link">
  初级开发篇
</a></li><li class="dropdown-item"><!----> <a href="/myblog/baodian/high/" class="nav-link">
  中高进阶篇
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具箱" class="dropdown-title"><span class="title">工具箱</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具箱" class="mobile-dropdown-title"><span class="title">工具箱</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          在线编辑
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  图片压缩
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          在线服务
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cloud.tencent.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  腾讯云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          博客指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://juejin.im/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.csdn.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="微信小程序项目" class="dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow down"></span></button> <button type="button" aria-label="微信小程序项目" class="mobile-dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/guide/" class="nav-link router-link-active">
  wxapp-music
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试宝典" class="dropdown-title"><span class="title">面试宝典</span> <span class="arrow down"></span></button> <button type="button" aria-label="面试宝典" class="mobile-dropdown-title"><span class="title">面试宝典</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/baodian/zero/" class="nav-link">
  初级开发篇
</a></li><li class="dropdown-item"><!----> <a href="/myblog/baodian/high/" class="nav-link">
  中高进阶篇
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具箱" class="dropdown-title"><span class="title">工具箱</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具箱" class="mobile-dropdown-title"><span class="title">工具箱</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          在线编辑
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  图片压缩
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          在线服务
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cloud.tencent.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  腾讯云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          博客指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://juejin.im/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.csdn.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>小程序端项目导学</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/myblog/guide/notes/one.html" class="sidebar-link">项目需求</a></li><li><a href="/myblog/guide/notes/two.html" aria-current="page" class="active sidebar-link">项目主要功能</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#音乐-菜单" class="sidebar-link">音乐 菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#轮播图" class="sidebar-link">轮播图</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#歌单列表" class="sidebar-link">歌单列表</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#歌单信息" class="sidebar-link">歌单信息</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#播放界面" class="sidebar-link">播放界面</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#发现-菜单" class="sidebar-link">发现 菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#发布" class="sidebar-link">发布</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#评论" class="sidebar-link">评论</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#分享" class="sidebar-link">分享</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#搜索" class="sidebar-link">搜索</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#我的-菜单" class="sidebar-link">我的 菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#最近播放" class="sidebar-link">最近播放</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#我的发现" class="sidebar-link">我的发现</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/two.html#小程序码" class="sidebar-link">小程序码</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>后台管理系统项目导学</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>云开发与Serverless</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>项目代码结构初始化</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序端项目开始</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="项目主要功能"><a href="#项目主要功能" class="header-anchor">#</a> 项目主要功能</h1> <h2 id="音乐-菜单"><a href="#音乐-菜单" class="header-anchor">#</a> 音乐 菜单</h2> <p><strong>音乐菜单</strong>由<strong>轮播图</strong>与<strong>歌单列表</strong>组成 ， 歌单列表通过云函数定时触发的方式通过 api 获取到。点击任意歌单，就会加载当前歌单所对应的<strong>歌单信息</strong>。</p> <h3 id="轮播图"><a href="#轮播图" class="header-anchor">#</a> 轮播图</h3> <p><strong>轮播图</strong>可以自动循环无缝播放，也可以自己拖动到下一张图片。
<img src="/myblog/img/轮播图.png" alt="轮播图"></p> <h3 id="歌单列表"><a href="#歌单列表" class="header-anchor">#</a> 歌单列表</h3> <p><strong>歌单列表</strong>中显示获取到的所有歌单，每一个歌单图标上面都会显示对歌单的描述，以及这个歌单的播放次数。
<img src="/myblog/img/歌单列表.png" alt="歌单列表"></p> <h3 id="歌单信息"><a href="#歌单信息" class="header-anchor">#</a> 歌单信息</h3> <p><strong>歌单信息</strong>包含当前歌单内所展示的歌曲，每首歌曲上面都有歌曲的名称以及歌手，点击任意歌曲会进入对应的<strong>播放界面</strong>。
<img src="/myblog/img/歌单信息.png" alt="歌单信息"></p> <h3 id="播放界面"><a href="#播放界面" class="header-anchor">#</a> 播放界面</h3> <p><strong>播放界面</strong>包含音乐唱片与音乐播放的进度条,以及歌词展示等。点击播放或者暂停按钮时，音乐会随之播放与暂停，并且音乐唱片和指针会有动画效果。点击音乐唱片，就会切换到当前的歌词界面，在歌词界面点击屏幕，则会切换到音乐唱片，并且拖动下方进度条，歌词和播放效果会随之联动。点击下一首或者上一首，进行歌曲的切换。</p> <table><thead><tr><th>音乐唱片与进度条</th> <th>歌词</th></tr></thead> <tbody><tr><td><img src="/myblog/img/唱片进度条.png" alt="唱片进度条"></td> <td><img src="/myblog/img/歌词.png" alt="歌词"></td></tr></tbody></table> <h2 id="发现-菜单"><a href="#发现-菜单" class="header-anchor">#</a> 发现 菜单</h2> <p><strong>发现菜单</strong>类似于博客功能，会展示博客列表。由<strong>发布</strong>、<strong>搜索</strong>和<strong>博客展示页面</strong> ，每条博客都包含<strong>评论</strong>与<strong>分享</strong> 功能。</p> <h3 id="发布"><a href="#发布" class="header-anchor">#</a> 发布</h3> <p>点击<strong>发布</strong>按钮，当前小程序需要用户进行授权，若没有授权，则会弹出授权页面，用户可以根据提示进行授权。授权成功后就可以跳转到<strong>发布页</strong>。在<strong>发布页</strong>中，包含<strong>用户编辑功能</strong>、<strong>添加图片功能</strong>、<strong>发布功能</strong>。发布按钮旁边会显示当前博客文字的字数，字数不超过 140 个字，图片最多可以上传 9 张。点击发布，刚才所编辑的博客信息就可以在博客列表中显示。 并且博客是按照时间逆序排序，即最新的博客显示在最上面。</p> <table><thead><tr><th></th> <th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><img src="/myblog/img/发布.png" alt="发布"></td> <td><img src="/myblog/img/发布1.png" alt="发布1"></td> <td><img src="/myblog/img/发布3.png" alt="发布3"></td> <td><img src="/myblog/img/发布2.png" alt="发布2"></td></tr></tbody></table> <h3 id="评论"><a href="#评论" class="header-anchor">#</a> 评论</h3> <p>点击评论按钮，显示写评论的页面。输入评论信息，点击发送，评论成功。当我们评论成功后，我们会收到一个模板消息推送（打开我们的服务通知，当我们评论成功后，就会收到评论成功的模板消息，并且可以看到评论内容）。点击消息卡片时，就会进入到所评论的博客对应的正文页面。</p> <table><thead><tr><th></th> <th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><img src="/myblog/img/评论.png" alt="评论"></td> <td><img src="/myblog/img/评论1.png" alt="评论1"></td> <td><img src="/myblog/img/评论2.png" alt="评论2"></td> <td><img src="/myblog/img/评论3.png" alt="评论3"></td></tr></tbody></table> <h3 id="分享"><a href="#分享" class="header-anchor">#</a> 分享</h3> <p>点击<strong>分享</strong>按钮，可以将其分享给我们的好友，好友会收到我们所分享的卡片。卡片上的内容就是我们所分享的博客的内容，当我们的好友点击分享的卡片，也会进入到所评论的博客对应的正文页面。</p> <table><thead><tr><th></th> <th></th></tr></thead> <tbody><tr><td><img src="/myblog/img/分享.png" alt="分享"></td> <td><img src="/myblog/img/分享1.png" alt="分享1"></td></tr></tbody></table> <h3 id="搜索"><a href="#搜索" class="header-anchor">#</a> 搜索</h3> <p><strong>关键字搜索</strong>，我们可以输入关键字对当前博客列表进行模糊查询。
<img src="/myblog/img/搜索.png" alt="搜索"></p> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p>发布博客功能、评论功能与分享功能都需要用户先给小程序进行授权</p></div> <h2 id="我的-菜单"><a href="#我的-菜单" class="header-anchor">#</a> 我的 菜单</h2> <p><strong>我的菜单</strong>包含<strong>最近播放</strong>、<strong>我的发现</strong>、<strong>小程序码</strong>功能，最上面会显示自己的头像与昵称。
<img src="/myblog/img/my.png" alt="my"></p> <h3 id="最近播放"><a href="#最近播放" class="header-anchor">#</a> 最近播放</h3> <p>点击<strong>最近播放</strong>，就会显示出我们最近播放过的音乐列表，点击任意歌曲，同样会进入到对应的<strong>播放界面</strong> <img src="/myblog/img/最近播放.png" alt="最近播放"></p> <h3 id="我的发现"><a href="#我的发现" class="header-anchor">#</a> 我的发现</h3> <p>点击<strong>我的发现</strong>，就会显示当前用户，所发布过的所有博客信息
<img src="/myblog/img/我的发现.png" alt="我的发现"></p> <h3 id="小程序码"><a href="#小程序码" class="header-anchor">#</a> 小程序码</h3> <p>点击<strong>小程序码</strong>，就会生成当前小程序所对应的<strong>小程序码</strong>，在<strong>小程序码中</strong>写入了用户的唯一标识，当别的用户扫描当前<strong>小程序码中</strong>时，我们就可以知道是谁扫了这个码。
<img src="/myblog/img/小程序码.png" alt="小程序码"></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">5/28/2021, 2:53:09 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/myblog/guide/notes/one.html" class="prev">
        项目需求
      </a></span> <span class="next"><a href="/myblog/guide/notes/three.html">
        项目需求
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/myblog/assets/js/app.5e430372.js" defer></script><script src="/myblog/assets/js/2.4f8c3bb6.js" defer></script><script src="/myblog/assets/js/27.cbb5edb3.js" defer></script>
  </body>
</html>
